<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"/>
		<style type="text/css">
			body{
				background: #f8f8f8;
			}
			/* .body{
				
				position: absolute;
				width: 100%;
				display: flex;
				justify-content: center;
				
			} */
			.Active{
				background-color: gold;
			}
			.nav>li>a{
				color: red;
			}
			.nav>li>a:hover{
				background-color: gold;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid body">
			<ul class="nav nav-pills" style="width: 100%; display: flex;justify-content: center;" >
			  <li id="t1" role="presentation"><a href="#">荤菜</a></li>
			  <li id='t2' role="presentation"><a href="#">素菜</a></li>
			  <li id="t3" role="presentation"><a href="#">主食</a></li>
			  <li id="t4" role="presentation"><a href="#">饮品</a></li>
			  <li id="t5" role="presentation"><a href="#">甜品</a></li>
			  <li id="t6" role="presentation"><a href="#">汤类</a></li>
			  <li id="t7" role="presentation"><a href="#">凉菜</a></li>
			  
			</ul
		</div>
		<iframe src="/meat_select" id="myframe" style="width: 100%;height:calc(100vh - 48px) ; border-radius: 15px;" frameborder="0"></iframe>
		
		
		<script type="text/javascript" src="../../static/js/jquery-3.6.0.min.js">
			
		</script>
		<script src="../../static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				$('#t1').click(function(){
					
					$('#myframe').attr('src','/meat_select')
				})
				$('#t2').click(function(){
					
					$('#myframe').attr('src','/vege_select')
				})
				$('#t3').click(function(){
					
					$('#myframe').attr('src','/staple_select')
				})
				$('#t4').click(function(){
					
					$('#myframe').attr('src','/drink_select')
				})
				$('#t5').click(function(){
					
					$('#myframe').attr('src','/sweet_select')
				})
				$('#t6').click(function(){
					
					$('#myframe').attr('src','/soup_select')
				})
				$('#t7').click(function(){
					
					$('#myframe').attr('src','/cool_select')
				})
				
				
			})
		</script>
	</body>
</html>
